<template>
    <div class="weitao">
        <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <p>刷新次数: {{ count }}</p>
            <template v-for="n in total">
                <p :key="n">{{n}}</p>
            </template>
        </van-pull-refresh> -->

        <!-- vue-scroller 上拉刷新，下拉加载 -->
        <scroller style="top: 0;" :on-refresh="refresh" :on-infinite="infinite" :noDataText="noDataText" ref="my_scroller">
            <template v-for="n in total">
                <p :key="n">{{n}}</p>
            </template>
        </scroller>

    </div>
</template>

<script>
import { PullRefresh, Toast } from "vant";
export default {
    name: "Weitao",
    components: {
        [PullRefresh.name]: PullRefresh,
        [Toast.name]: Toast
    },
    data() {
        return {
            count: 0,
            isLoading: false,
            total: 110
        };
    },

    methods: {
        onRefresh() { //vant下拉加载
            setTimeout(() => {
                this.$toast("刷新成功");
                this.isLoading = false;
                this.count++;
                this.total += this.total;
            }, 500);
        },

        refresh(done) {
            setTimeout(() => {
                done();
            }, 1500);
        },
        infinite(done) {
            setTimeout(() => {
                if(this.count < 3) {
                    this.count++;
                    this.total = (100 * this.count);
                    done()
                } else {
                    //停止加载
                    this.$refs.my_scroller.finishInfinite(true);
                }
               
            }, 1000);
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.weitao{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
</style>